<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta name="description" content="Tutorial about how to construct the famous MC Escher's 120� lizard tesselation.">
<meta name="author" content="Arno Wilhelm">
<meta name="keywords" content="MC Escher, tesselation, lizard, salamander, gecko, 120�, hexagon, pattern, equilateral triangle,
endless, infinite">
<meta name="date" content="2007-04-01T08:00:00+01:00">
<title></title>
</head>

<body>

This little tutorial shows how to construct MC Escher's tesselation that is composed out of 3 lizards arranged in 120 degrees. 
The pictures were created with inkscape in the svg format. 

<h1>Table of Contents</h1>

<p>
<h3>
<ol>
<li><a href="#1">The original Artwork</a></li>
<li><a href="#2">Analyzing the pattern</a></li>
<li><a href="#3">Tesselating the first line</a></li>
<li><a href="#4">Tesselating the second line</a></li>
<li><a href="#5">Arranging the basic pattern</a></li>
</ol>
</h3>
</p>
<br/><hr/><br/>


<h1 id="1">1. The original Artwork</h1>

The original artwork looks similar to this:

<p><img align="middle" src="png/Salamander_tutorial_10.png" border="4" alt="The original artwork"/></p>


<h1 id="2">2. Analyzing the pattern</h1>

When we anaylize the pattern we can see that there are <i>3</i> different points where three different lizards 
touch it other:

<ol>
<li>The right cheek</li>
<li>The knee of the left hind foot</li>
<li>The heel of the right hind foot</li>
</ol>

When we connect these special points we can construct a <i>hexagon</i> like in the picture below:

<p><img align="middle" src="png/Salamander_tutorial_11.png" border="4" alt="Analyzing the pattern"/></p>

After a closer look at the picture you can see that there are only <i>two lines</i> along <i>two edges</i> 
of each equilateral triangle that repeat all the time.<br/>
These are:
<ul>
<li>The line that leads from one corner of the base of a triangle to the other corner</li>
<li>The line that leads from one corner of the left edge of a triangle to the other corner of the left edge</li>
</ul>

The first line tesselates in (+-) 120 degrees angle around one corner of the base of an triange around the whole hexagon.<br/>
The second line tesselates in (+-) 120 degrees angle around the center of the hexagon.

<h1 id="3">3. Tesselating the first line</h1>

The following picture shows the first line on the base of a triangle:

<p><img align="middle" src="png/Salamander_tutorial_2.png" border="4" alt="The first line"/></p>

And here you can see it after beeing tesselated 120 degrees around a corner of each triangle:

<p><img align="middle" src="png/Salamander_tutorial_3.png" border="4" alt="Tesselating the first line"/></p>


<h1 id="4">4. Tesselating the second line</h1>

The following picture shows the second line (green) that leads from the one corner of the triangle (= middle of the hexagon) to another corner along
the left edge of the triangle. You can see that it is partly covered by the first line (red):a

<p><img align="middle" src="png/Salamander_tutorial_4.png" border="4" alt="The second line"/></p>

After tesselating the second (green) line 3 times around the middle of the hexagon you get following pattern:

<p><img align="middle" src="png/Salamander_tutorial_6.png" border="4" alt="Tesselating the second line"/></p>

Yeah, in fact, that's it ;-)

<h1 id="5">5. Arranging the basic pattern</h1>

Now after we have created the basic pattern we only have to clone it and arrange the clones:

<p><img align="middle" src="png/Salamander_tutorial_7.png" border="4" alt="The basic pattern with hexagon"/>
<img align="middle" src="png/Salamander_tutorial_8.png" border="4" alt="The basic pattern"/></p>
<p><img align="middle" src="png/Salamander_tutorial_9.png" border="4" alt="Arranging the clones"/></p>

And that's the final pattern from which we have started at the beginning of that tutorial:

<p><img align="middle" src="png/Salamander_tutorial_10.png" border="4" alt="The final pattern"/></p>


</body>
</html>
